<template>
  <el-drawer v-model="dialogVisible" :title="`${formInline._id?'编辑':'新增'}班级`" size="500" :before-close="handleClose">
    <el-form :model="formInline" ref="formEl" label-width="80px">
      <div class="bold fz16 title">班级信息</div>
      <el-form-item label="班级名称" prop="className">
        <el-input v-model="formInline.className" placeholder="班级名称" clearable :disabled='disabledClassInfo' />
      </el-form-item>
      <el-form-item label="班级人数" prop="classNum">
        <el-input v-model="formInline.classNum" placeholder="班级人数" clearable :disabled='disabledClassInfo' />
      </el-form-item>
      <el-form-item label="班级课程" prop="classCourses">
        <el-input v-model="formInline.classCourses" placeholder="班级课程" clearable :disabled='disabledClassInfo' />
      </el-form-item>
      <el-form-item label="班级老师">
        <el-input v-model="formInline.classTeacher" placeholder="班级老师" />
      </el-form-item>
      <el-form-item label="开班时间" prop="classOpeningTime">
        <DatePicker v-model="formInline.classOpeningTime" type="datetime" :disabled='disabledClassInfo'></DatePicker>
      </el-form-item>
      <el-form-item label="班级课时" prop="classHours">
        <el-input v-model="formInline.classHours" type="number" placeholder="班级课时" clearable :disabled='disabledClassInfo' />
      </el-form-item>
      <el-form-item label="班级色值">
        <el-color-picker show-alpha v-model="formInline.color" />
      </el-form-item>
      <el-form-item label="职业">
        <el-input v-model="formInline.occupational" placeholder="职业" clearable :disabled='disabledClassInfo' />
      </el-form-item>
      <el-form-item label="等级">
        <el-input v-model="formInline.level" placeholder="等级" clearable :disabled='disabledClassInfo' />
      </el-form-item>

      <div class="bold fz16 title" style="margin-top: 50px;">排课信息</div>
      <el-form-item label="单位课时">
        <el-input v-model="formInline.unitClassHours" placeholder="单位课时" />
      </el-form-item>
      <el-form-item label="排课日期">
        <div>
          <div class="flex alignCenter Selected">已选
            <span>{{formInline.classDates?formInline.classDates.length:0}}</span>
            天
          </div>
          <dateSelectPicker mode="multip" v-model="formInline.classDates" :defaultData="defaultData"></dateSelectPicker>
        </div>
      </el-form-item>
      <el-form-item label="上课时间">
        <TimeRange format="HH:mm" v-model:start="formInline.classStartTime" v-model:end="formInline.classEndTime"></TimeRange>
      </el-form-item>
      <el-form-item label="授课讲师">
        <el-input v-model="formInline.teachingTeacher" placeholder="授课讲师" clearable />
      </el-form-item>
      <el-form-item label="授课地点">
        <el-input v-model="formInline.classAddress" placeholder="授课地点" clearable />
      </el-form-item>
      <el-form-item label="班级编号">
        <el-input v-model="formInline.classId" placeholder="班级编号" clearable />
      </el-form-item>
      <!-- <el-form-item label="班级标签">
        <el-checkbox-group v-model="formInline.classTabs">
          <el-checkbox :label="item.value" v-for="(item,index) in counter.classTabs" :key="index">
            {{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading">
          确 认
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const emit = defineEmits(["fatherMethod"]);

let dialogVisible = ref(false);
let unitClassHoursList = ref([2, 4, 6, 8, 10]);
let loading = ref(false);
let formInline = ref({
  classNum: null,
  className: null,
  classTeacher: null,
  classOpeningTime: null,
  classHours: null,
  classStartTime: null,
  classEndTime: null,
  unitClassHours: 8, //单位课时
  teachingTeacher: null, //授课讲师
  teachingTeacherId: null, //授课讲师id
  classDates: [], //排课日期
  classAddress: null, //授课地点
  color: "", //班级色值
  classId: "", //班级编号
  occupational: "", //职业
  level: "", //等级
  classTabs: [1, 2, 3, 4, 5, 6, 7, 8], //班级标签
  classCourses: null,
});
let defaultData = ref([]); //默认日期
let courseHours = ref(0); //课程总课时

let disabledClassInfo = ref(false);
let classId = null; //班级id

function handleClose() {
  formInline.value = {
    classNum: null,
    className: null,
    classTeacher: null,
    classOpeningTime: null,
    classHours: null,
    classStartTime: null,
    classEndTime: null,
    unitClassHours: 8, //单位课时
    teachingTeacher: null, //授课讲师
    teachingTeacherId: null, //授课讲师id
    classDates: [], //排课日期
    classAddress: null, //授课地点
    color: "",
    classId: "",
    occupational: "", //职业
    level: "", //等级
    classTabs: [1, 2, 3, 4, 5, 6, 7, 8],
    classCourses: null,
  };
  if (proxy.$refs.formEl) proxy.$refs.formEl.resetFields();
  emit("fatherMethod"); //列表重新加载
  dialogVisible.value = false;
}

async function open(row, isDisabled?: string) {
  if (row && row._id) {
    classId = row._id;
    formInline.value = proxy.$utils.formatFunction(row, {
      ...formInline.value,
    });
    if (!isDisabled) formInline.value._id = row._id; //编辑
  }
  if (isDisabled && isDisabled == "disabledClassInfo") {
    disabledClassInfo.value = true;
    let arr = await proxy.$apis.teachingScheduleDataToC({
      type: "query",
      data: { classId: row._id },
    });
    defaultData.value = [];
    courseHours.value = 0;
    arr.forEach((element) => {
      defaultData.value.push(element.date);
      courseHours.value += element.unitClassHours;
    });
  }
  dialogVisible.value = true;
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!proxy.$refs.formEl) return;
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      console.log("error submit!", fields);
    }
  });
};

async function save() {
  try {
    loading.value = true;
    let data = { ...formInline.value };
    //新增排课
    if (disabledClassInfo.value) {
      let obj = {
        classId,
        unitClassHours: data.unitClassHours,
        classStartTime: data.classStartTime,
        classEndTime: data.classEndTime,
        classAddress: data.classAddress,
        teachingTeacher: data.teachingTeacher,
        teachingContent: "",
        classTeacher: data.classTeacher,
      };
      let { classDates } = data;
      if (classDates && classDates.length) {
        //return console.log("请选择排课日期-走到这里了吗", classDates);
        for (let index = 0; index < classDates.length; index++) {
          const element = classDates[index];
          let query = { ...obj };
          query["date"] = element;
          query["dateStamp"] = proxy.$utils.getTimeFn(element); //开课时间的时间戳
          await proxy.$apis.teachingScheduleDataToC({
            type: "add",
            data: query,
          });
        }
      } else {
        return proxy.$utils.showToast("请选择排课日期", 0);
      }
    }
    //编辑
    else if (data._id) {
      await proxy.$apis.classToC({ type: "update", data });
    } else {
      //开班时间<当前时间
      if (
        proxy.$utils.getTimeFn(data.classOpeningTime) < proxy.$utils.getTimeFn()
      ) {
        data.status = 1; //已开班
      } else {
        data.status = 0; //待开班
      }
      await proxy.$apis.classToC({ type: "add", data });
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.title {
  margin-bottom: 15px;
}
.Selected {
  span {
    color: #4196a2;
    padding: 0 5px;
    font-weight: bold;
    font-size: 18px;
  }
}
</style>
